﻿@{
    ViewBag.Title = "ColorizeWidget";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<h2>Colorize Widget</h2>

<style type="text/css">
  .custom-colorize {
    font-size: 20px;
    position: relative;
    width: 75px;
    height: 75px;
  }

  .custom-colorize-changer {
    font-size: 10px;
    position: absolute;
    right: 0;
    bottom: 0;
  }
</style>

<script type="text/javascript" src="/JS/MyWidget/lordjs.colorize.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // initialize with default options
        $("#my-widget1").colorize();

        // initialize with two customized options
        $("#my-widget2").colorize({
            red: 60,
            blue: 60
        });

        // initialize with custom green value
        // and a random callback to allow only colors with enough green
        $("#my-widget3").colorize({
            green: 128,
            random: function (event, ui) {
                return ui.green > 128;
            }
        });

        // click to toggle enabled/disabled
        $("#disable").click(function () {
            // use the custom selector created for each widget to find all instances
            // all instances are toggled together, so we can check the state from the first
            if ($(":custom-colorize").colorize("option", "disabled")) {
                $(":custom-colorize").colorize("enable");
            } else {
                $(":custom-colorize").colorize("disable");
            }

        });

        // click to set options after initalization
        $("#black").click(function () {
            $(":custom-colorize").colorize("option", {
                red: 0,
                green: 0,
                blue: 0
            });
        });
    });
</script>

<div>
  <div id="my-widget1">color me</div>
  <div id="my-widget2">color me</div>
  <div id="my-widget3">color me</div>
  <button id="disable">Toggle disabled option</button>
  <button id="black">Go black</button>
</div>

